<!-- 
    面包屑
emit
    子传父
 -->
 <template>
    <div class="header-breadcrumb">
        <!-- 图标和面包屑 -->
        <div class="img-breadcrumb">
            <!-- 图标 -->
            <a href="javascript:void(0)" @click="isCollapse = !isCollapse" :title="isCollapse?'展开':'收起'"
              style="color: black;">
              <el-icon style="font-size: 28px;transform:rotate(0deg);transition: all 0.5s ease-out;"
                :class="{rotate:isCollapse}">
                <Fold />
              </el-icon>
            </a>
            <!-- 面包屑 -->
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/index/dashboard' }">{{$t('home')}}</el-breadcrumb-item>
              <template v-for="(item,index) in $route.matched.slice(1)" :key="index">
                <template v-if="$route.matched[1].name != 'Dashboard' ">
                  <el-breadcrumb-item>{{$t(item.meta.title)}}</el-breadcrumb-item>
                </template>
              </template>
            </el-breadcrumb>
          </div>
    </div>
 </template>

 <script setup lang="ts">
// 引入element-plus的图标样式
import menus from "@/router/pages"
import { ArrowRight,Fold } from '@element-plus/icons-vue'
import { ref,watch } from 'vue';
import { useRoute, useRouter } from "vue-router"
const router = useRouter()
const route = useRoute()
// 判断侧边导航栏是否展开
const isCollapse = ref(false)

// 子传父，运用非TS语法，使用js的语法来写，目前很稳定
let emit = defineEmits<{(e : "isCollapses" , isCollapse : boolean):void}>()
// 使用监听事件来监听isCollapse的变化，发生变化的时候触发监听事件，在触发子传父
watch(isCollapse,(isCollapse)=>{
    // 传递更改后的值
    emit("isCollapses" , isCollapse)
})

 </script>

 <style scoped lang="less">
    .header-breadcrumb{
        width: 100%;
        // 图片和面包屑
        .img-breadcrumb {
            padding: 0px 20px;
            height: 60px;
            display: flex;
            align-items: center; //垂直居中
          // 图标旋转-180度
          .rotate {
            transform: rotate(-180deg) !important;
          }
          // 面包屑样式
          .el-breadcrumb {
            margin-left: 20px;
          }
        }
    }
 </style>